<template>
    <div class="myOrder">
        <!-- 导航栏 -->
        <Back :sticky="true" title="我的订单" target="My"/>
        <div>
            <Bg>
                <van-tabs
                    v-model="active"
                    animated
                    swipeable
                    @change="getFindOrder"
                >
                    <van-tab
                        v-for="(item, index) in tabsData"
                        :key="index"
                        :title="item"
                    >
                        <div
                            class="indexBox"
                            v-for="(v1, i1) in orderData"
                            :key="i1"
                        >
                            <!-- 订单商品信息 -->
                            <div class="orderInformation_box">
                                <div class="fnBox">
                                    <!-- 订单号 -->
                                    <div
                                        class="p1"
                                        :style="{ color: '#e99036' }"
                                    >
                                        {{ v1.oid }}
                                    </div>

                                    <!-- 小功能 -->
                                    <div class="fnBox_right">
                                        <div class="del" v-if="v1.status === 2">
                                            <div>已完成</div>
                                            <van-icon
                                                name="delete"
                                                @click="
                                                    postRemoveOrder(v1.oid, i1)
                                                "
                                            />
                                        </div>
                                        <div
                                            class="receiving"
                                            v-else
                                            @click="postReceive(v1.oid, i1)"
                                        >
                                            确认收货
                                        </div>
                                    </div>
                                </div>
                                <!-- 商品数据盒 -->
                                <div class="information_box">
                                    <div
                                        class="informationItm_box"
                                        v-for="(v2, i2) in v1.products"
                                        :key="i2"
                                    >
                                        <IformationItm :itemData="v2" />
                                    </div>
                                </div>
                                <!-- 展开按钮 -->
                                <div
                                    class="more"
                                    v-if="v1.products22.length > 0"
                                    @click="moreGoods(i1)"
                                >
                                    显示更多商品 <van-icon name="arrow-down" />
                                </div>

                                <!-- 分割线 -->
                                <div class="splitLine"></div>

                                <!-- 数据结算盒 -->
                                <div class="settlement">
                                    <div class="date">
                                        {{ v1.date | dateTime }}
                                    </div>

                                    <div class="settlement_bottom">
                                        <div class="p2">
                                            共计 {{ v1.count }} 件商品
                                        </div>

                                        <div class="p3">
                                            总计<span :style="{ color: 'red' }"
                                                >￥</span
                                            ><span class="span">{{
                                                v1.total
                                            }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <van-empty
                            v-show="orderData.length === 0"
                            class="custom-image"
                            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
                            description="没有订单数据"
                        />
                    </van-tab>
                </van-tabs>
            </Bg>
        </div>
    </div>
</template>

<script>
// 导入公共组件
import Back from "../components/Back.vue";
import Bg from "../components/Bg.vue";
import IformationItm from '../components/InformationItm.vue';
import { Toast } from 'vant';
import { Dialog } from 'vant';

export default {
    name: "MyOrder",
    // 注册子组件
    components: {
        Back,
        Bg,
        IformationItm
    },
    data() {
        return {
            tabsData: ["全部", "进行中", "已完成"],


            // 显示的订单数据
            orderData: [
                //订单数据结构
                // {
                //   oid: 订单编号,
                //   status: 订单状态,
                //   date: 订单日期,
                //   count: 订单商品数量
                //   total: 订单总金额,
                //   products: [
                //     商品数据1,
                //     商品数据2
                //     商品数据3
                //   ]
                //   products22: [
                //     商品数据4,
                //     商品数据5
                //     ....
                //   ]
                // }
            ],
            // 选中订单状态
            active: 0,
        }
    },
    methods: {
        // 请求 获取订单数据
        getFindOrder() {
            this.axios({
                method: "GET",
                url: "/findOrder",
                params: {
                    status: this.active
                }

            }).then((result) => {
                // 
                if (result.data.code === 700) {
                    return this.$router.push({ name: "Logon" });
                }


                // 请求成功
                if (result.data.code === 70000) {


                    // 获取全部订单号
                    let Alloid = [];
                    result.data.result.forEach((v) => {
                        // 调整图片属性
                        v.small_img = v.smallImg;

                        // 搜索订单号，没有就添加
                        if (Alloid.indexOf(v.oid) === -1) {
                            Alloid.push(v.oid);
                        }
                    });
                    // 


                    // 遍历订单号 //整理数据结构
                    let orderData = [];
                    Alloid.forEach((v) => {

                        let data = {
                            oid: v,
                            status: null,
                            date: null,
                            count: 0,
                            total: 0,
                            products: [],
                            products22: [],
                        }

                        result.data.result.forEach((item) => {
                            if (item.oid === v) {
                                if (data.products.length === 0) {
                                    data.status = item.status;
                                    data.date = item.createdAt;
                                }
                                data.count += item.count;
                                data.total += item.count * item.price;

                                // 控制商品显示
                                if (data.products.length < 3) {
                                    data.products.push(item);
                                } else {
                                    data.products22.push(item);
                                }
                            }
                        })
                        orderData.push(data);
                    });
                    // 对数组进行 时间 排序
                    orderData.sort((a, b) => {
                        return new Date(b.date).getTime() - new Date(a.date).getTime()
                    })

                    this.orderData = orderData;
                    
                }
            }).catch((err) => {
                

            });
        },

        // 请求 确实收货
        postReceive(oid, i) {
            Dialog.confirm({
                title: '确定收货吗？',

            }).then((result) => {
                this.axios({
                    method: "POST",
                    url: "/receive",
                    data: { oid }

                }).then((result) => {
                    
                    if (result.data.code === 700) {
                        return this.$router.push({ name: "Logon" });
                    }

                    if (result.data.code === 80000) {
                        Toast(result.data.msg);

                        // 改变现有数据
                        if (this.active === 0) {
                            this.orderData[i].status = 2;
                        } else {
                            this.orderData.splice(i, 1);
                        }
                    }

                }).catch((err) => {
                    
                });
            }).catch((err) => { });
        },

        // 请求删除已完成订单
        postRemoveOrder(oid, i) {
            Dialog.confirm({
                title: '确定删除该订单吗？',
            }).then((result) => {


                this.axios({
                    method: "POST",
                    url: "/removeOrder",
                    data: { oid }

                }).then((result) => {
                    
                    if (result.data.code === 700) {
                        return this.$router.push({ name: "Logon" });
                    }

                    if (result.data.code === 90000) {
                        Toast(result.data.msg);

                        // 改变现有数据
                        this.orderData.splice(i, 1);
                    }

                }).catch((err) => {
                    
                });
            }).catch((err) => { });
        },

        // 显示更多商品
        moreGoods(i) {
            this.orderData[i].products.push(...this.orderData[i].products22.splice(0));
            
        }
    },
    // 过滤器
    filters: {
        // 过滤时间显示
        dateTime: (v) => {
            let time = new Date(v);
            let n = time.getFullYear();//年
            let y = time.getMonth() + 1 //月
            let r = time.getDate();//日
            let s = time.getHours();// 时
            let f = time.getMinutes();// 分
            let m = time.getSeconds();// 秒

            // 补零
            y = y < 10 ? "0" + y : y;
            r = r < 10 ? "0" + r : r;
            s = s < 10 ? "0" + s : s;
            f = f < 10 ? "0" + f : f;
            m = m < 10 ? "0" + m : m;

            // 输出
            time = `${n}-${y}-${r} ${s}:${f}:${m}`;
            // 
            return time
        }
    },
    created() {
        this.getFindOrder();
    },
}
</script>

<style lang="less" scoped>
.myOrder {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #f0f2f3;
    overflow: scroll;

    /deep/ .van-tabs__line {
        width: 25%;
    }

    /deep/ .van-tab__pane {
        background-color: #f0f2f3;
        border-top: 1px solid transparent;
        border-bottom: 1px solid #f0f2f3;

        // 订单盒
        .indexBox {
            // 订单商品详情
            .orderInformation_box {
                margin: 15px 5px;
                background-color: #fff;
                border-radius: 10px;
                border-bottom-right-radius: 0;
                border-bottom-left-radius: 0;
                padding: 10px;

                // 右上角的功能盒
                .fnBox {
                    display: flex;
                    justify-content: space-between;

                    .fnBox_right {
                        // 删除已完成
                        .del {
                            font-size: 13px;
                            display: flex;
                            align-items: center;

                            i {
                                display: block;
                                color: blue;
                                margin-left: 5px;
                                font-size: 20px;
                            }
                        }
                        // 收货按钮
                        .receiving {
                            font-size: 15px;
                            border: 1px solid blue;
                            color: blue;
                            border-radius: 5px;
                            padding: 2px 2px 1px;
                        }
                    }
                }
                .p1 {
                    font-size: 16px;
                }
                .information_box {
                    margin-top: 20px;
                    margin-bottom: 20px;
                }

                // 分割线
                .splitLine {
                    width: 100%;
                    height: 0;
                    border-top: 3px dotted #f0f2f3;
                    position: relative;

                    &::before {
                        content: '';
                        position: absolute;
                        left: -20px;
                        top: -11px;
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        background-color: #f0f2f3;
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        right: -20px;
                        top: -11px;
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        background-color: #f0f2f3;
                    }
                }

                .more {
                    text-align: center;
                    color: #999;
                    font-size: 14px;
                    margin-bottom: 15px;
                }
            }

            // 商品结算盒
            .settlement {
                font-size: 14px;
                margin-top: 20px;
                margin-bottom: 5px;

                .date {
                    font-size: 13px;
                    color: #888;
                    margin-bottom: 10px;
                }

                .settlement_bottom {
                    display: flex;
                    justify-content: space-between;

                    .p3 {
                        font-size: 12px;

                        .span {
                            font-weight: 600;
                            font-size: 16px;
                            color: red;
                        }
                    }
                }
            }
        }
    }
    /deep/ .custom-image {
        padding-top: 150px;
    }
}
</style>